<template>
  <el-dialog
    v-model="state.dialogVisible"
    :title="state.dialogTitle"
    width="600"
    @close="closeDialog"
  >
    <div v-loading="state.loading">
      <el-form class="owner-form" :rules="ownerRules" ref="ownerFormRef" :model="form" label-width="auto">
        <el-form-item label="房东姓名" prop="ownerName">
          <el-input v-model.trim="form.ownerName" placeholder="请输入房东姓名" clearable/>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model.trim="form.phone" placeholder="请输入联系方式" clearable/>
        </el-form-item>
        <el-form-item label="房东类型" prop="ownerType">
          <el-select v-model="form.ownerType" placeholder="请选择" clearable>
            <el-option v-for="item in ownerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="推荐指数" prop="rate">
          <el-rate :colors="elRateColor" :max="5" v-model="form.rate" allow-half clearable/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model.trim="form.remark" placeholder="请输入备注" clearable/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmDialog" :loading="state.submitLoading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ownerTypeOptions, elRateColor } from '@/assets/js/enum'
import Util from '@/assets/js/util'
import { ownerStore } from '@/stores'

const useOwnerStore = ownerStore()
const emit = defineEmits(['refreshOwnerList'])

const props = defineProps({
  ownerId: {
    type: String,
    default: ''
  },
  ownerInfo: {
    type: Object,
    default: () => {}
  }
})

const state = reactive({
  loading: false,
  dialogVisible: false,
  dialogTitle: '',
  submitLoading: false
})

const ownerFormRef = ref()
const form = reactive({
  ownerName: '',
  phone: '',
  ownerType: null,
  rate: 0,
  remark: ''
})

const ownerRules = reactive({
  ownerName: [
    { required: true, message: '请输入房东姓名', trigger: 'blur' }
  ],
  phone: [
    { required: false, message: '请输入联系方式', trigger: 'blur' }
  ],
  ownerType: [
    { required: true, message: '请选择房东类型', trigger: 'change' }
  ],
  rate: [
    { required: false, message: '请选择费率', trigger: 'change' }
  ],
  remark: [
    { required: false, message: '请输入备注', trigger: 'blur' }
  ]
})

// 重置表单
const resetForm = () => {
  form.ownerName = ''
  form.phone = ''
  form.ownerType = null
  form.rate = 0
  form.remark = ''
}
const openDialog = ( type: string = 'add', data: object = {}) => {
  if (type === 'edit') {
    state.dialogTitle = '编辑房东信息'
    Util.assignObj(form, data)
  } else {
    state.dialogTitle = '新增房东信息'
    resetForm()
  }
  state.dialogVisible = true
  type === 'add' && ownerFormRef.value && ownerFormRef.value.clearValidate('ownerType')
}
const closeDialog = () => {
  state.dialogVisible = false
  resetForm()
}

const confirmDialog = () => {
  ownerFormRef.value.validate((valid: boolean) => {
    if (valid) {
      addOwnerInfo()
    } else {
      return false
    }
  })
}

// 新增房东信息
const addOwnerInfo = () => {
  state.submitLoading = true
  let params = { ...form }
  useOwnerStore.addOwnerInfo(params).then(res => {
    const { state, body } = res
    if (state === 'OK' && body) {
      ElMessage.success('新增房东信息成功')
      closeDialog()
      emit('refreshOwnerList')
    } else {
      ElMessage.error(res.errorMessage || '新增房东信息失败')
    }
  })
  .catch(error => {
    ElMessage.error(error.errorMessage || '新增房东信息失败')
  })
  .finally(() => {
    state.submitLoading = false
  })
}

// watch(() => props.ownerId, (newVal, oldVal) => {
//   console.log('watch', newVal)
//   console.log('watch', oldVal)
//   if (newVal || newVal === oldVal) {
//     console.log('更新表单', props.ownerInfo)
//     Object.keys(form).forEach(key => {
//       if (props.ownerInfo.hasOwnProperty(key)) {
//         form[key] = props.ownerInfo[key]
//       }
//     })
//   } else {
//     console.log('重置表单')
//     resetForm()
//   }
// }, { deep: true, immediate: true})

onMounted(() => {
})

defineExpose({
  openDialog
})

</script>
<style scoped>
.owner-form {
  padding: 20px;
}
</style>